在上一篇文章裡，我分享了透過 AI 來改善使用者對任務管理功能的回饋意見，進而推動平台功能與 UI 細節持續優化的過程。這篇文章，則要延續這個主題，分享更多實際的案例，說明我是如何在使用者意見與 AI 協助之間，不斷迭代，讓平台逐漸改善、更貼近需求。

如果說 功能完整 是一個基礎，那麼 體驗順暢 則是讓使用者能夠長期使用下去的關鍵。以下幾個案例，正好呈現了這個過程中一些有趣的挑戰與解法。

1. 使用說明的需求：功能不只是存在，還要被理解

其中一個最直接的回饋是來自於使用者的疑問：

「動物拼圖要怎麼獲得？」、「成就系統有什麼用處？」

這些問題讓我意識到，雖然在入口網站裡，其實已經寫過各種功能的說明，但多數人並不會耐心去翻看網站上的長篇介紹。對於一個操作平台來說，功能如果缺乏即時、直覺的說明，等於是存在感大打折扣。

因此，我決定讓 AI 幫我建立一個 使用說明頁面。這個頁面不只是靜態文字，而是包含以下設計：

• 逐項功能的清楚介紹：每個功能都有詳細說明。
• 關鍵字搜尋：使用者可以輸入「拼圖」、「成就」、「獎勵」等字眼，就能立刻找到相關的操作說明。
• 即時查閱：頁面與平台整合，讓使用者隨時能快速跳轉查看。

這個功能的開發速度出乎意料的快。AI 不只熟悉我專案的結構，還能自動幫我查詢每個功能的運作方式，並將解釋寫進頁面，並且整個說明頁面樣式完全符合平台設計。當然免不了，仍然會有些遺漏，透過幾次來回修改，我就完成了這個「自帶搜尋引擎的說明頁面」。

2. 字體大小問題：被忽略的小細節

另一個回饋是：「有些字太小了」。

說來慚愧，這是我一開始完全忽略的問題。我原本的做法是讓 AI 自動生成樣式，卻沒有針對字體大小做統一規範。結果是：某些頁面字體偏小，特別在手機上，閱讀起來十分吃力。

我嘗試請 AI 幫我找出所有小於 12px 的字體，但這裡遇到了一個現實挑戰——字體大小的定義方式很多，不同寫法難以一次檢測。

AI 嘗試過幾次，卻始終無法正確列出所有需要調整的地方。最後，我還是得自己逐頁檢查，把有問題的文字標記出來，再逐一請 AI 調整。

這過程雖然繁瑣，但也讓我學到一個教訓：

與其事後逐一修補，不如一開始就建立好「規範」。
於是我請 AI 幫我定義了一組字體大小規則，例如：

--font-size-xs: 14px;    /* 最小字體 - 說明文字、輔助資訊 */
--font-size-sm: 16px;    /* 小字體 - 一般內容文字 */
--font-size-md: 18px;    /* 中字體 - 標準文字、按鈕 */
--font-size-lg: 20px;    /* 大字體 - 小標題、重要資訊 */
--font-size-xl: 32px;    /* 特大字體 - 主標題、重點顯示 */

並在修改時要求 AI 一律使用這套規範調整字體大小。這樣不僅解決了目前的問題，也讓未來維護時更容易統一管理。不過因為實在有點多，目前就只先針對明顯太小的部分先做調整。

.settings-header h1 {
  color: var(--text-color);
  font-size: var(--font-size-xl);
  margin: 0;
}

3. 被忽略的按鈕：位置與互動的體驗差異

另一個使用者的回饋是：

「新增任務時，有些視窗的按鈕需要下滾才看得到，看起來像是 BUG。」

以任務管理頁面為例，在「新增任務」視窗中，底部的確認／取消按鈕，原本會隨著捲動條往下移動，結果導致使用者必須額外滾動才能點到。這樣的體驗確實不佳。

我把需求簡單描述給 AI 並附上截圖：

新增任務視窗的確認／取消按鈕，應該固定在底部，不受 scrollbar 滾動影響

AI 完全理解，並幫我生成了修正的 CSS。然而，這裡卻出現了一個副作用——由於一開始的元件命名不夠嚴謹，修改後造成 其他頁面的按鈕也跟著變動，一度陷入「全域汙染」的問題。

最後，我重新調整了元件命名，確保這些樣式的影響範圍僅限於目標元件，問題才得以解決。

4. UI 元件壓縮：跨裝置的挑戰

最後一個案例，是在不同裝置上測試時發現的 UI 壓縮問題。由於我在測試時，沒有針對所有螢幕比例做完整驗證，因此有些元件在不同解析度下顯示不正常，甚至被擠壓變形。

這種情況下，AI 的幫助非常直接：我截圖並描述畫面異常的狀況，AI 就能針對相應的 CSS 調整，讓元件在不同比例下自動適應。

不過，這也讓我體會到一個現實：

測試工作是非常重要的一環，未來也該多花點時間思考如何讓 AI 幫忙做測試。

這部分，目前仍然需要我自己逐一操作檢查，再把具體問題丟給 AI 解決。

回顧：AI 協助下的 Vibe Coding 維護

從這些案例來看，即便是一個完全透過 Vibe Coding 的專案，只要遵循一定的規範，後續維護也能繼續依靠 AI 協助完成。無論是字體大小統一、UI 按鈕位置調整，還是跨裝置適配，都能透過 AI 提升效率。

不過，過程中也體現了一個事實：AI 並不是萬能的。
例如字體大小問題，AI 明明沒有完整調整到，卻還是回覆：

全部修好了

這種「幻覺」問題，代表 AI 很多時候仍然不夠可靠。

因此，開發者本身對專案還是需要保有一定程度的理解，才能寫出更精準的提示詞，甚至在 AI 出錯時，自己能辨識問題並進行修正。

另一個也讓我深有體會的是，雖然我對整體架構有所控管，但畢竟很多實作細節不完全理解(尤其是專案開始時邊實驗邊做，走了不少彎路)，如果 AI 出錯，自己也不明白原因，就要有足夠耐心跟 AI 周旋或是趕緊學習補充知識了。

從細節到體驗的持續優化

軟體功能的存在本身並不代表價值，只有當使用者能清楚理解、輕鬆操作、無痛體驗時，功能才真正發揮它的意義。

在這個過程中，AI 確實能帶來巨大的幫助：它能快速生成修改，處理繁瑣的樣式調整，甚至協助建立全新的使用說明頁面。然而，AI 仍無法完全取代人類的思考與判斷，尤其在設計規範、測試驗證與錯誤辨識上，依然需要人工的參與。

同時，工程師的角色也因此更顯重要。AI 的確能幫我們加速處理重複與機械化的工作，但真正決定產品品質與方向的，仍是工程師的專業判斷：對問題的理解、對體驗的把握，以及在關鍵時刻做出正確選擇的能力。只要使用得當，AI 會是放大效率的工具。

敬請期待下一篇《把單字學習變成挑戰：AI 協助的親子實驗》